<template>
  <Modal
      :draggable="!this.$config.mask"
      :mask="this.$config.mask"
      :mask-closable="!this.$config.mask"
      :value="value"
      @on-visible-change="visibleChange"
      :width="1000">
    <p slot="header">
      流程数据
    </p>

    <Row>
      <Col span="24">
        <div style="width:100%;padding:2px;overflow:auto;max-height:600px;background-color: #f8f8f9;"
             class="beautiful-bar">
          <pre lang="js">{{ getFormatterData(modalData) }}</pre>

        </div>


      </Col>
    </Row>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/the-matrix.css';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/selection/active-line';
import 'codemirror/addon/edit/matchbrackets'

@Component({
  components: {},
})
export default class FlowDataModal extends AbpBase {
  name: string = 'FlowDataModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object, default: {}}) modalData: any;


  codeMirror: any = null;

  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.$emit('input', value);
    }
  }


  getFormatterData(data) {
    try {
      const json = JSON.parse(data);
      return JSON.stringify(json, null, 4);
    } catch (e) {
      return data;
    }
  }

  mounted() {

  }
}
</script>

<style lang="less" scoped>
.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
  position: absolute;
  background: #ccc;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid red;
  border-radius: 2px;
}

</style>
